<template>
	<view>
		<block v-if="loading">
			<view  class="skeleton"  :class="{ animate: animate }">
				<view class="skeleton-list" style="justify-content: space-between;">
					<view class="skeleton-title md " style="width: 20%;"></view>
					<view class="skeleton-title md " style="width: 20%;"></view>
				</view>
			<view class="swiper"></view>
				<view class="skeleton-list mt-4">
					<view class="skeleton-title md " style="width: 20%;"></view>
					<view class="skeleton-title md" style="width: 20%;margin-left: 10rpx;"></view>
				</view>
				<view class="order mt-4" v-for="item in 3" :key="item">
					<view class="skeleton-list" style="justify-content: space-between;">
						<view class="skeleton-title md " style="width: 20%;"></view>
						<view class="skeleton-title md " style="width: 20%;background-color: #3C8EFF;"></view>
					</view>
					<view class="skeleton-list mt-1" style="justify-content: space-between;">
						<view class="skeleton-title sm " style="width: 70%;"></view>
						<view class="skeleton-title sm " style="width: 15%;"></view>
					</view>
					<view class="skeleton-list mt-1">
						<view class="skeleton-title sm " style="width: 40%;"></view>
					</view>
					<view class="skeleton-list mt-1" style="justify-content: space-between;">
						<view class="" style="display: flex;">
							<image src="" mode="" class="img"></image>
							<view class="name"></view>
						</view>
						<view class="btn"></view>
					</view>
				</view>
			</view>
		</block>
		<block v-else>
			<view >
				<slot></slot>
			</view>
			</block>
	</view>
</template>

<script>
const DEFAULT_ROW_WIDTH = '100%';
const DEFAULT_LAST_ROW_WIDTH = '40%';
export default {
	props: {
		loading: {
			type: Boolean,
			default: true
		},
		flexType: {
			type: String,
			default: 'flex-start' // center	居中	√		space-between	两端对齐	√		space-around	子元素拉手分布	√		flex-start	居左		flex-end	居右
		},
		titleWidth: {
			type: String,
			default: '30%'
		},
		animate: {
			type: Boolean,
			default: true
		},
	},
	data() {
		return {};
	},
};
</script>

<style scoped lang="less">
.skeleton {
	--bg-color: #f2f3f5;
	--row-height: 15px;
	--row-margin-top: 12px;
	--title-border-radius: 2px;
	--text-height: 10px;
	padding: 20rpx 40rpx;
	margin-top: var(--status-bar-height);
}

.skeleton-title {
	background-color: var(--bg-color);
	height: var(--row-height);
	border-radius: var(--title-border-radius);
	margin-bottom: var(--row-margin-top);
}
.skeleton-title.md {
	height: 50rpx;
}
.skeleton-title.lg {
	height: 80rpx;
}
.skeleton-title + .skeleton-rows {
	margin-top: var(--row-margin-top);
}
.skeleton.animate {
	animation: skeleton-blink 1.2s ease-in-out infinite;
}
@keyframes skeleton-blink {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0.6;
	}
	100% {
		opacity: 1;
	}
}
.swiper{
	height: 300rpx;
	background-color: var(--bg-color);
	border-radius: 10rpx;
}
.skeleton-list{
	display: flex;
}
.img{
	width: 50rpx;
	height: 50rpx;
	border-radius: 50%;
	background-color: var(--bg-color);
	vertical-align: middle;
}
.name{
	width: 100rpx;
	background-color: var(--bg-color);
	margin-left: 10rpx;
	height: 20rpx;
	margin-top: 10rpx;
}
.btn{
	width: 216rpx;
	height: 56rpx;
	background-color: #3C8EFF;
	border-radius: 10rpx;
}
</style>
